<template>
    <div class="showPage">
        <router-link class="go-back" :to="{path:'/city',query:{city_id:city_id,city_name:encodeURI(city_name)}}"><img src="../assets/search-input-icon-back.png"></router-link>
        <div class="mint-hea">
            <mt-swipe ref="mySwipe"  class="mint-swipe" :auto="swiper.auto"  v-if="swiper.data.length>0">
                <mt-swipe-item class="slide1" v-if="video.sources.length" >
                    <img class="mint-swipe-play" @click="videoPlay" src="../assets/play-btn.png">
                    <my-video ref="myVideo"   class="article-bar-video" :sources="video.sources" :options="video.options"></my-video>
                </mt-swipe-item>
                <mt-swipe-item class="slide1" v-for="item in swiper.data">
                    <img class="mint-swipe-item-img" :src="item.src">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <!--分享-->
        <div class="share-btn" id="shareBtn" :data-clipboard-text="shareUrl" @click="shareFn">
            <img class="share-btn-img" src="../assets/buy-share-icon1.png"/>
        </div>
        <div class="share-div" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="main">
            <div class="main-title1">
                {{title}}
            </div>
            <div class="main-title2">
                {{subTitle}}
            </div>
            <div class="main-tag">
                <span v-for="item in  tag">{{item.tag_name}}</span>
            </div>
            <div class="main-price">
                <div class="main-price-new">¥ {{zhekou}}<span class="main-price-old">{{yuanjia}}</span></div>
                <div class="main-price-sales">销量 {{Sales}} 笔</div>
            </div>
            <div class="price-dollar" v-if="foreign_zhekou">
                <!-- <div class="price-dollar-icon"><img src="../assets/dollar.png" alt=""></div> -->
                <div class=""><span v-if="currency == 'CAD'">CAD </span><span v-if="currency == 'USD'">USD </span>$ {{foreign_zhekou}}<span class="main-price-old">{{foreign_yuanjia}}</span></div>
                <div class="main-price-sales" @click="scrollTocomments">
                    评论 {{comment_num}} 条
                    <img class="main-price-sales-img" src="../assets/city-list-arr.png"/>
                </div>
            </div>
            <router-link class="main-coupon main-discount" :to="'/show-ticket/'+goods_id">
                <div class="main-coupon-head">
                    <img class="main-coupon-head-icon" src="../assets/buy-sales.png"/>
                    领取产品旅行红包
                </div>
                <img class="main-coupon-head-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <dir class="main-coupon">
                <div class="flex-between">
                    <div class="main-coupon-head" >
                        <img class="main-coupon-head-icon" src="../assets/buy-warning.png"/>
                        <span v-if="need_confirm==1">确认后出票</span>
                        <span v-if="need_confirm==2">立即出票</span>
                    </div>
                    <div class="flex-between-btn" @click="showPoster = true">
                        <span>生成海报</span>
                    </div>
                </div>
            </dir>
            
        </div>
        <div class="h30"></div>

        <div class="selectBuy">
            <router-link v-if="goods_status==1"  :to="'/show-buy/'+goods_id" class="selectBuy-item">
                选择：日期/套餐类型/出游人数
                <img class="selectBuy-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <div v-else  class="selectBuy-item">
               商品已下架
            </div>
            <!--<div class="selectBuy-date" v-if="goods_status==1">
                最早可预订日期：{{zuizao}}
            </div>-->
        </div>
        <div class="h30"></div>


        <div class="tab" ref="tabMenu">
            <div class="tab-menu-mian">
                <div class="tab-menu" :class="tabMenuFixed ? 'fixed' : ''">
                    <div :class="tabArr.curHdIndex == index ? 'active' : ''" v-for="(item,index) in tabArr.data"
                         @click="tabFun(index,item.id)">{{item.title}}
                    </div>
                </div>
            </div>

            <div class="tab-body" ref="aboutBody">
                <!-- begin tab1-->
                <div class="tab-body-item panel active" ref="panelA">
                    <!-- <div class="panel-title1"><span class="panel-title1-icon"></span>产品介绍</div> -->
                    <!-- <div class="panel-title2"><span class="panel-title2-icon"></span>推荐简介</div> -->

                    <div class="panel-desc" v-html="goods_introduce">
                    </div>
                </div>
                <!-- end tab1-->
                <!-- begin tab2-->
                <div class="tab-body-item active" ref="panelB">
                    <div class="h30"></div>
                    <div class="panel" id="goFee">
                        <div class="panel-title1"><span class="panel-title1-icon"></span>费用说明</div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>费用包含</div>
                        <div class="panel-desc" v-html="price_include">
                        </div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>费用不含</div>
                        <div class="panel-desc"  v-html="price_noinclude">
                        </div>
                    </div>
                </div>
                <!-- end tab2-->
                <!-- begin tab3-->
                <div class="tab-body-item active" ref="panelC">
                    <div class="h30"></div>
                    <div class="panel">
                        <div class="panel-title1">
                            <span class="panel-title1-icon"></span>
                            注意事项
                        </div>
                        <div class="panel-warning">
                            <div class="panel-warning-title">
                                <img class="panel-warning-title-warning" src="../assets/buy-warning.png"/>
                                注意事项：
                            </div>
                            <div class="panel-warning-desc" v-html="goods_careful">
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end tab3-->
                <!-- begin tab4-->
                <div class="tab-body-item active" ref="panelD">
                    <div class="h30"></div>
                    <div class="panel">
                        <div class="panel-title1"><span class="panel-title1-icon"></span>退改规则</div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>退改规则说明</div>
                        <div class="panel-desc" v-html="goods_retreating">
                        </div>
                    </div>
                </div>
                <!-- end tab4-->
            </div>
        </div>
        <div class="h30"></div>
        <div class="panel">
            <div class="panel-title1" ref="comments"><span class="panel-title1-icon"></span>用户评价</div>
            <div class="comment">
                <div class="comment-list">
                    <div class="comment-list-item" v-for="(item,index) in comment">
                        <div class="comment-list-item-head">
                            <img class="comment-list-item-head-avatar" :src="/^(http|https):\/\//.test(item.touxiang) ? item.touxiang : url+item.touxiang"/>
                            <div class="comment-list-item-head-title">
                                <div class="comment-list-item-head-username">{{item.member_nickname}}</div>
                                <div class="comment-list-item-head-date">{{item.creattime}}</div>
                            </div>
                        </div>
                        <div class="comment-list-item-desc">{{item.content}}</div>
                        <div class="comment-list-item-imgs">
                            <img v-for="item2 in item.img"  :preview="index" :src="/^(http|https):\/\//.test(item2.src) ? item2.src : url+item2.src"/>
                        </div>
                    </div>
                    <div class="comment-list-item"  v-if="comment.length<=0">暂无用户评价</div>
                </div>

                <div class="comment-more"  v-if="comment.length>0">
                    <router-link :to="'../../comment/'+goods_id" class="comment-more-url">
                        查看更多评价
                    </router-link>
                </div>
            </div>
        </div>

        <div class="h30"></div>


        <div class="rec">
            <div class="rec-title">猜你喜欢</div>
            <div class="rec-list">
                <div class="rec-list-item" v-for="item in rec">
                    <div @click="goRec(item.goods_id)">
                        <img class="rec-list-item-img" :src="item.image"/>
                        <div class="rec-list-item-info">
                            <div class="rec-list-item-tit">{{item.name}}</div>
                            <div class="rec-list-item-price">¥ {{item.jiage}} <span class="old">{{item.yuanjia}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h120"></div>
        <div class="buyBar">
            <router-link to="/" class="buyBar-item ">
                <img class="buyBar-item-ico" src="../assets/tabBar-home.png">
                <div class="buyBar-item-tit">返回首页</div>
            </router-link>
            <div  class="buyBar-item">
                <img class="buyBar-item-ico" @click="collectionFun()"  :src="collection==1 ? collectionArr.imgHover : collectionArr.img">
                <div class="buyBar-item-tit">收藏</div>
            </div>
            <router-link v-if="goods_status==1" router-link :to="'/show-buy/'+goods_id" class="buyBar-buy">
                立即订购
            </router-link>
            <div v-else class="buyBar-buy gray" >
                商品已下架
            </div>
        </div>
        <Poster :posterInfo="productInfo" :showPoster="showPoster" @closePoster="closePosterFn"></Poster>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import config from "../store/config"
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    import myVideo from 'vue-video'
    import Poster from "../components/Poster"

    //add by sunyifei for debug
    // import Vue from 'vue';
    // import VueToasted from 'vue-toasted';
    //
    // Vue.use(VueToasted, {
    //   fitToScreen: true,
    //   position: 'top-left'
    // });

    export default {
        name: "Show",
        components: {
            myVideo,
            Poster
        },
        data() {
            return {
                url:config.url,
                city_id:'',
                city_name:'',
                goods_id: 0,
                goods_status:1,
                title: '',
                subTitle: '',
                Sales: '',
                comment_num: 0,
                tag: [], //关键词
                zhekou: '', //价格
                yuanjia: 0,//原价
                foreign_zhekou: '', //
                foreign_yuanjia: 0,//
                currency: 0,//
                need_confirm:'', //二次确认
                zuizao: '',
                collectionArr:{
                    img:require('../assets/tabBar-heart.png'),
                    imgHover:require('../assets/tabBar-heart-hover.png')
                },
                swiper: {
                    data: [],
                    auto: 3000,

                },
                shareView: false,

                comment:[], //评论
                rec:[], //推荐
                goods_introduce:'',
                price_include:'',
                price_noinclude:'',
                goods_careful:'',
                goods_retreating:'',
                collection:0,

                tabArr: {
                    data: [
                        {title:'产品介绍',id:"panelA"},
                        {title:'费用说明',id:"panelB"},
                        {title:'注意事项',id:"panelC"},
                        {title:'退改规则',id:"panelD"}
                    ],
                    curHdIndex: 0
                },
                tabMenuFixed: false,
                DomScrollTop:0,
                scrollTop:0,
                tabtop: 0,
                shareUrl:"",//分享url
                location:{},//地理位置经纬度
                videoFlag: false, //视频
                video:{
                    sources: [],
                    options: {
                        autoplay: false,
                        volume: 0.6,
                        poster:''
                    }
                }, //视频
                productInfo: '',
                showPoster: false
            }
        },
        methods: {
            linkUrl() {
                var url = window.location.href;

                var locationurl = url.split('#')[1];

                var userinfo = storage.get('userinfo');
                var uid = ''
                if (userinfo) {
                    uid = "uid=" + userinfo.member_id;
                } else {
                    uid = "uid=";
                }
                if (locationurl.indexOf('?') == -1) {
                    uid = '?' + uid;
                } else {
                    uid = '&' + uid;
                }
                if (locationurl.charAt(0) == '/') {
                    locationurl = locationurl.replace('/', '')
                }

                locationurl=locationurl.replace(/uid=/gi,'')


                if(config.url.indexOf('c.kuaibangxing') >= 0){
                    this.shareUrl =  config.url + '/quick_help_wap1/#/' + locationurl + uid;
                }else{
                    this.shareUrl =  location.origin + '/#/' + locationurl + uid;
                }

            },
            handleScroll () {
                this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if(this.scrollTop> this.$refs.tabMenu.offsetTop){
                    this.tabMenuFixed=true
                }else{
                    this.tabMenuFixed=false
                }
            },
            shareFn() {
                let that = this;
                if(this.isWechat){
                    this.shareView = !this.shareView;
                }else{
                    if(this.$store.state.appNestState){
                        let data = {
                            command: 'wxShare',
                            content: {
                                action:'wechatShare',
                                link: that.shareUrl,
                                title: that.title, // 分享标题
                                desc: that.subTitle, // 分享描述
                                imgUrl:that.swiper.data[0].src, // 分享图标
                            }
                        };
                      window.postMessage(JSON.stringify(data))
                    }else {
                        let clipboard = new Clipboard("#shareBtn");
                        clipboard.on("success", function() {
                        Toast({message: '分享链接复制成功 !!!',duration: 1500})
                        });
                        clipboard.on("error", function() {
                            Toast({message: '分享链接复制失败',duration: 1000})
                        });
                    }
                    
                }
            },
            tabFun(val,id) {
                this.tabArr.curHdIndex = val;
                this.DomScrollTop = this.$refs[id].offsetTop;
                this.goScroll();
            },
            goScroll(){
                document.body.scrollTop = document.documentElement.scrollTop = this.DomScrollTop - 30;
            },
            goRec(val){
                this.$router.push('/show/'+val)
                this.goods_id=val;
                this.getData();
                this.pageScroll(0);
            },
            pageScroll(x){
                window.scroll(x, 0);
            },
            getData() {
                let _that = this;
                let params = {
                    goods_id: _that.goods_id,
                }

                _that.axios.postAll('wapgoodsdetails', params,true)
                    .then(res => {
                        if(res.data.code==0){
                            _that.goods_status=res.data.data.goods_status;
                            _that.city_id=res.data.data.city_id;
                            _that.city_name=res.data.data.city_name;
                            _that.title= res.data.data.title;
                            _that.subTitle=res.data.data.subTitle;
                            _that.Sales=res.data.data.Sales;//销量
                            _that.comment_num=res.data.data.comment_num;//评价数量
                            _that.tag= res.data.data.tag; //关键词
                            _that.zhekou=res.data.data.zhekou; //价格
                            _that.need_confirm=res.data.data.need_confirm; //二次确认
                            _that.yuanjia=res.data.data.yuanjia;
                            _that.zuizao=res.data.data.zuizao;
                            _that.foreign_zhekou=res.data.data.foreign_zhekou;
                            _that.foreign_yuanjia=res.data.data.foreign_yuanjia;
                            _that.currency=res.data.data.currency;
                            if(res.data.data.img.image){
                                var swImgRes=res.data.data.img.image
                                var swImgArr=[]
                                for (var item in swImgRes){
                                    if(swImgRes[item].search(/^(http|https):\/\//)==-1){
                                        swImgArr.push({src:_that.url+swImgRes[item]})
                                    }else{
                                        swImgArr.push({src:swImgRes[item]})
                                    }
                                }
                                _that.swiper.data=swImgArr//轮播图
                            }
                            _that.collection=res.data.data.collection
                            _that.goods_introduce=_that.replaceImg(res.data.data.goods_introduce);
                            _that.price_include=_that.replaceImg(res.data.data.price_include);
                            _that.price_noinclude=_that.replaceImg(res.data.data.price_noinclude);
                            _that.goods_careful=_that.replaceImg(res.data.data.goods_careful);
                            _that.goods_retreating=_that.replaceImg(res.data.data.goods_retreating);

                            _that.comment=res.data.data.comment;

                            // 视频
                            if(res.data.data.img.video.hasOwnProperty('src')){
                                _that.video.sources=[{
                                    src: res.data.data.img.video.src || '',
                                    type: 'video/mp4'
                                }];
                                _that.video.options.poster=res.data.data.img.video.img || '';
                            }
                            if(res.data.data.tuijian1){
                                var tuijian1=[]
                                var reg=/^(http|https):\/\//;
                                res.data.data.tuijian1.forEach((item)=>{
                                    if(!reg.test(item.image)){
                                        item.image=_that.url+item.image
                                    }
                                    tuijian1.push(item)
                                })
                                _that.rec=tuijian1;
                            }
                            _that.productInfo = res.data.data;
                            _that.productInfo.posterImg = _that.swiper.data[0].src;
                            _that.productInfo.person_price_cny = res.data.data.yuanjia ? res.data.data.yuanjia : res.data.data.zhekou;
                            // if (this.$store.state.token) {//分享
                                this.share();
                            // }
                        }else if(res.data.code==1){
                            Toast({message: res.data.msg, duration: 1500});
                            this.$router.back(-1);
                        }else{
                            Toast({message: res.data.msg, duration: 1500});
                        }
                    })
                    .catch(err => console.log(err));
            },
            // 替换图片路径
            replaceImg(data){
                data=this.formatImg(data);
                data=data.replace( /<style(([\s\S])*?)<\/style>/gi,'');
                //data=data.replace( /style="(([\s\S])*?)"/gi,'');
                //data=data.replace( /width="(([\s\S])*?)"/gi,'width="100%"');
                //data=data.replace( /height="(([\s\S])*?)"/gi,'height="auto"');
                data=data.replace( /\/ueditor\//g,this.url+'/ueditor/');
                return data.replace( /<img/ig,'<img preview="99" ');
            },
            formatImg(html) {
                var newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
                    var match = match.replace(/style=\"(.*)\"/gi, '');
                    return match;
                });
                return newContent;
            },
            // 收藏
            collectionFun(){
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }

                this.axios.post('wapcollection', {'goods_id':this.goods_id})
                    .then(res => {
                        Toast({message: res.msg, duration: 1000});
                        this.collection=!this.collection;
                    })
                    .catch(err => console.log(err));
            },
            //经纬度获取当地价格
            changeShowPrice(){
                let params = {
                    lat:this.location.latitude,
                    lng:this.location.longitude,
                    yuanjia:this.yuanjia,
                    zhekou:this.zhekou,
                };
                this.axios.postAll('wap/goods/changeShowPrice', params)
                    .then(res => {
                        if(res.data.code == 0){
                            this.foreign_zhekou=res.data.data.foreign_zhekou;
                            this.foreign_yuanjia=res.data.data.foreign_yuanjia;
                            this.currency=res.data.data.currency;
                        }
                    })
                    .catch(err => console.log(err));
            },
            scrollTocomments(){
                document.body.scrollTop = document.documentElement.scrollTop = this.$refs.comments.offsetTop;
            },
            // 分享
            share() {
                wxShare({
                    title: this.title, // 分享标题
                    desc: this.subTitle, // 分享描述
                    //link: window.location.href, // 分享链接
                    imgUrl:this.swiper.data[0].src, // 分享图标
                    getLocation:true,
                    debug: false

                },(res)=> {//分享成功后的回调函数
                    this.shareView=false
                    if(res && res._type == 'location'){
                        this.location = res;
                        this.changeShowPrice();
                    }
                    // console.log('分享成功')
                });
            },
            // 视频播放
            videoPlay(){
                this.videoFlag=true;
                this.$refs.myVideo.play();
                this.$refs.mySwipe.clearTimer(); //清除轮播图自动播放
            },
            closePosterFn(val){
                this.showPoster = val;
            }
        },
        mounted() {
            window.scrollTo(0,0);
            this.goods_id = this.$route.params.id;
            if(!this.goods_id || this.goods_id == '0'){
                this.$router.push({path:"/"});
                return;
            }
            this.getData();
            window.addEventListener('scroll', this.handleScroll);
            this.linkUrl();
        },
        updated(){
            this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
        },
        destroyed(){
            window.removeEventListener('scroll', this.handleScroll)
        }

    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .showPage {
        position: relative;
    }

    .go-back {
        position: absolute;
        top: rpx(30);
        left: rpx(30);
        width: rpx(64);
        height: rpx(64);
        padding-top: rpx(16);
        z-index: 999;
        img {
            width: rpx(32);
            height: rpx(32);
        }
    }

    .mint-hea{
        height: rpx(440);
    }
    .mint-hea.mint-swipe-items-wrap{
        height: rpx(440) !important;
    }
    .mint-hea .mint-swipe {
        /*height: rpx(440);*/
        /*视频播放按钮*/
        &-play{
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 999;
            margin-left: rpx(-48);
            margin-top: rpx(-48);
            width: rpx(96);
            height: rpx(96);
        }
    }

    .mint-swipe-item {
        &-img {
            width: 100%;
            height: rpx(440);
        }
    }

    //分享
    .share {
        &-btn {
            position: fixed;
            width: rpx(90);
            height: rpx(90);
            right: rpx(30);
            top: rpx(20);
            z-index: 998;
            text-align: center;
            &-img {
                width: rpx(80);
                height: rpx(80);
            }
        }
        &-div {
            position: fixed;
            background: rgba(0, 0, 0, .5);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            text-align: center;
            &-img {
                margin-top: rpx(30);
                width: rpx(500);
                height: rpx(220);
            }
        }
    }

    //主要信息
    .main {
        padding: 0 rpx(30) rpx(20);
        &-title1 {
            padding-top: rpx(30);
            font-size: rpx(36);
            line-height: 130%;
            font-weight: bold;
        }
        &-title2 {
            padding-top: rpx(10);
            line-height: 130%;
            font-size: rpx(26);
        }

        &-tag {
            padding-top: rpx(15);
            span {
                padding: rpx(6);
                border: solid 1px $color2;
                border-radius: $radius6;
                margin-right: rpx(6);
                font-size: rpx(20);
                color: $color5;
            }
        }
        &-price {
            display: flex;
            padding: rpx(40) 0 rpx(20);
            justify-content: space-between;
            align-items: flex-end;
            &-new {
                font-size: rpx(48);
                color: $color3;
                font-weight: bold;
            }
            &-old {
                padding-left: rpx(10);
                font-size: rpx(24);
                color: $color5;
                text-decoration: line-through;
            }
            &-sales {
                padding-bottom: rpx(6);
                font-size: rpx(24);
                color: $color5;
                &-img{
                    width: rpx(30);
                    height: rpx(30);
                }
            }
        }
        &-confirm{
            padding: rpx(10) 0 ;
        }
        &-coupon {
            margin:  0 0 rpx(20);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: rpx(26);
            .flex-between{
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &-btn{
                    padding: rpx(14) rpx(20) rpx(10);
                    min-height: rpx(48);
                    vertical-align: center;
                    font-size: rpx(28);
                    color: #ffffff;
                    background-color:#ff7d01;
                    border-radius: rpx(30);
                }
            }
            &-head {
                flex: 1;
                display: flex;
                align-items: center;
                &-icon {
                    margin-right: rpx(10);
                    width: rpx(32);
                    height: rpx(32);
                }
                &-arr {
                    width: rpx(32);
                    height: rpx(32);
                }
            }
        }
        &-discount:hover {
            background: $bgcolor1;
        }
    }
    .price-dollar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: rpx(20);
        &-icon {
            display:inline-block;
            width:rpx(40);
            margin-right:rpx(8);
            img{
                width: 100%;
            }
        }
    }

    //选择套餐

    .selectBuy {
        padding: rpx(10) rpx(30);
        &-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: rpx(30) 0;
            /*border-bottom: solid 1px $color2;*/
            &-arr {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-date {
            padding: rpx(30) 0;
            color: $color5;
        }
    }

    /* tab样式 */
    .tab {
        background: $color0;
        &-menu-mian{
            min-height: rpx(92);
        }
        &-menu {
            height: rpx(92);
            display: flex;
            padding: 0 rpx(30);

        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: $color0;
            z-index: 999;
        }
        &-menu div {
            flex: 1;
            padding: rpx(30) rpx(20);
            text-align: center;
            font-size: rpx(30);
            border-bottom: solid $color2 1px;
        }
        &-menu .active {
            color: $color3;
            border-bottom: solid $color3 rpx(2);
        }

        &-body {
            &-item {
                display: none;
            }
            &-item.active {
                display: block;
            }
        }

    }

    //产品介绍
    .panel {
        padding: rpx(30);
        &-title1 {
            padding: rpx(20) 0;
            font-size: rpx(40);
            display: flex;
            align-items: center;
        }
        &-title1-icon {
            display: inline-block;
            margin-right: rpx(20);
            width: rpx(8);
            height: rpx(40);
            border-radius: rpx(10);
            background: $color3;

        }
        &-title2 {
            padding: rpx(30) 0 rpx(30);
            font-size: rpx(36);
        }
        &-title2-icon {
            display: inline-block;
            margin-right: rpx(20);
            margin-bottom: rpx(6);
            width: rpx(12);
            height: rpx(12);
            border-radius: 50%;
            background: $color3;

        }
        &-desc {
            font-size: rpx(30);
            line-height: 200%;
            word-break: break-all;
            height: auto;
            overflow: hidden;
            >>> img{
                max-width: 100% !important;
                height: auto;
                padding: rpx(10) 0;
            }
        }
        &-prompt {
            padding: rpx(20) 0;
            font-size: rpx(24);
        }
        &-warning {
            padding: rpx(30);
            padding: rpx(30);
            border: solid 1px #fbde9d;
            background: #fffbf2;
            &-title {
                padding: rpx(10) 0 rpx(20);
                font-weight: rpx(36);
                color: $color7;
                &-warning {
                    width: rpx(48);
                    height: rpx(48);
                }
            }
            &-desc {
                font-size: rpx(24);
                line-height: 200%;
                word-break: break-all;
                height: auto;
                overflow: hidden;
                img{
                    max-width: 100% !important;
                    padding: rpx(10) 0;
                    height: auto;
                }
            }
        }

    }

    .route {
        position: relative;
        padding-bottom: rpx(20);
        border-left: solid rpx(2) $color2;
        &-head {
            &-mark {
                position: absolute;
                left: rpx(-16);
                top: rpx(30);
                width: rpx(32);
                height: rpx(32);
            }
            padding-top: rpx(26);
            padding-left: rpx(30);
            font-size: rpx(30);
            font-weight: bold;
        }
        &-body {
            margin: rpx(30) rpx(30) 0;
            padding: rpx(30);
            border: solid 1px #fbde9d;
            background: #fffbf2;
            font-size: rpx(24);
            line-height: 200%;
            img {
                max-width: 100%;
            }
        }
        &-more {
            text-align: center;
            display: flex;
            justify-content: center;
            padding: rpx(60) 0 rpx(40);
        }
        &-more-btn {
            display: block;
            padding: rpx(15) rpx(50);
            border-radius: $radius30;
            box-shadow: 0 0 rpx(40) $color2;
            color: $color3;
            font-size: rpx(30);
        }
    }

    //评论

    .comment {
        &-list {
            &-item {
                border-bottom: solid 1px $color2;
                padding: rpx(30) 0;
                &-head {
                    display: flex;
                    align-items: center;
                    padding: rpx(20) 0;
                    &-avatar {
                        width: rpx(80);
                        height: rpx(80);
                    }
                    &-title {
                        padding: rpx(10) rpx(20);
                    }
                    &-username {
                        font-size: rpx(30);
                    }
                    &-date {
                        font-size: rpx(24);
                        font-size: $color5;
                    }
                }
                &-desc {
                    font-size: rpx(26);
                    line-height: 200%;
                }
                &-imgs {
                    padding: rpx(20) 0;
                    img {
                        width: 30.3%;
                        height: rpx(220);
                        margin-right: 3%;
                        margin-bottom: rpx(20);
                    }
                }
            }
            &-item:last-child {
                border-bottom: none;
            }
        }
        &-more {
            &-url {
                display: block;
                padding: rpx(20) rpx(30);
                font-size: rpx(34);
                text-align: center;
                border: #b5b5b5 solid 1px;
                border-radius: $radius6;
            }
        }
    }

    /*猜你喜欢*/
    .rec {
        padding: rpx(15);
        background: $bgcolor1;
        &-title {
            padding: rpx(40) rpx(15);
            font-size: rpx(40);
        }
        &-list {
            display: flex;
            flex-wrap: wrap;
            &-item {
                width: 50%;

                border-radius: 0 0 $radius6 $radius6;
                margin-bottom: rpx(30);
                padding: 0 rpx(15);
                &-img {
                    border-radius: $radius6 $radius6 0 0;
                    width: 100%;
                    height: rpx(220);
                }
                &-info {
                    display: block;
                    width: 100%;
                    height: rpx(160);
                    background: $color0;
                    border-radius: 0 0 $radius6 $radius6;
                }
                &-tit {
                    padding: rpx(20) rpx(20) 0;
                    font-size: rpx(26);
                    line-height: 130%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical
                }
                &-price {
                    padding: rpx(20);
                    font-size: rpx(30);
                    font-weight: bold;
                    color: $color3;
                    .old {
                        padding-left: rpx(10);
                        font-size: rpx(24);
                        color: $color5;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }

    //底部
    .buyBar {
        position: fixed;
        z-index: 9999;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: $color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        &-item {
            width: rpx(150);
            height: rpx(90);
            text-align: center;
            padding:0;
            border-right: $color2 solid 1px;
            color: #696969;
            &-ico {
                padding-top: rpx(6);
                width: rpx(48);
                height: rpx(48);
            }
            &-tit {
                padding-top: rpx(6);
                font-size: rpx(24);
            }
        }
        &-item:last-child {
            border-right: none;
        }
        &-buy {
            flex: 1;
            height: rpx(90);
            line-height: rpx(90);
            background: linear-gradient(to left, #ff5722, #ffc000);
            text-align: center;
            font-size: rpx(40);
            color: $color0;
        }
        .gray{
            background: #ccc;
        }
        &-active {
            color: $color3;
        }
    }


</style>

<style lang="scss">
    .showPage .__cov-video-container .__cov-contrl-content{
        display: none!important;
    }
    //产品介绍
    .panel {
        &-desc {
            font-size: rpx(30);
            line-height: 200%;
            word-break: break-all;
            height: auto;
            overflow: hidden;
            img{
                max-width: 100% !important;
                height: auto;
                padding-bottom: rpx(20);
                border-bottom: solid 10px #fff;
            }
            p{
                margin-bottom: rpx(20);
                img{
                    max-width: 100% !important;
                    height: auto;
                    padding-bottom: rpx(20);
                    border-bottom: solid 10px #fff;
                }
            }
        }
        &-warning {
            &-desc {
                font-size: rpx(24);
                line-height: 200%;
                word-break: break-all;
                height: auto;
                overflow: hidden;
                img{
                    max-width: 100% !important;
                    height: auto;
                    padding-bottom: rpx(20);
                    border-bottom: solid 10px #fff;
                }
            }
        }
    }
</style>
